<template>
  <div>
    <a-drawer
      :title="titleDraw"
      placement="right"
      :width="1080"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      :body-style="{ paddingBottom: '80px' }"
    >
      <div>
        <a-form-model
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="信息标题">
            <a-input v-model="form.title" />
          </a-form-model-item>
          <a-form-model-item label="信息分类">
            <a-select v-model="form.type" placeholder="选择新闻分类">
              <a-select-option value="0">
                反诈新闻
              </a-select-option>
              <a-select-option value="1">
                义警风采
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="信息封面">
            <div class="clearfix">
              <image-upload v-model="form.image" />

              <!--                        <a-upload
                          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                          list-type="picture-card"
                          :file-list="fileList"
                          @preview="handlePreview"
                          @change="handleChange"
                        >
                          <div v-if="fileList.length < 1">
                            <a-icon type="plus" />
                            <div class="ant-upload-text">
                              Upload
                            </div>
                          </div>
                        </a-upload>-->
              <a-modal
                :visible="previewVisible"
                :footer="null"
                @cancel="handleCancel"
              >
                <img alt="示例" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </a-form-model-item>

          <a-form-model-item label="信息内容">
            <editor v-model="form.content" />
          </a-form-model-item>
        </a-form-model>
      </div>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" @click="onClose">
          提交
        </a-button>
      </div>
    </a-drawer>
    <essay-header
      :titleleft="titleleft"
      :tableData="tableData"
      @search="search"
      :btnmsg="btnmsg"
      :btnshow="false"
      @add="addDrawer"
    />
    <a-table :columns="columns" :data-source="tableData.value" bordered>
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
      <span slot="type" slot-scope="text, record">
        <span v-if="record.type === 0" class="type">测试</span>
        <span v-if="record.type === 1" class="type">专题新闻</span>
        <span v-if="record.type === 3" class="type">反诈新闻</span>
        <span v-if="record.type === 4" class="type">义警风采</span>
      </span>
      <span slot="operation" slot-scope="text, record">
        <a class="look" @click="lookDrawer" v-if="record.title">查看</a>
        <a-divider type="vertical" />
        <a @click="deleteDrawer" class="check">删除</a>
        <a-divider type="vertical" />
        <a class="check" @click="editDrawer(record.newsId)">编辑</a>
      </span>
    </a-table>
  </div>
</template>
<script>
import Editor from "../../components/Editor.vue";
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const columns = [
  {
    title: "时间",
    dataIndex: "title",
    scopedSlots: { customRender: "title" }
  },
  {
    title: "警格",
    className: "column-money",
    dataIndex: "type",
    filters: [
      { text: '测试', value: '0' },
      { text: '反诈新闻', value: '反诈新闻' },
      { text: '专题新闻', value: '2' },
      { text: '义警风采', value: '3' },
    ],
    // filteredValue: filteredInfo.name || null,
    onFilter: (value, record) => record.type.includes(value),
    // sorter: (a, b) => a.name.length - b.name.length,
    // sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
    // ellipsis: true,
    scopedSlots: { customRender: "type" }
  },
  {
    title: "街路巷",
    dataIndex: "content"
  },
  {
    title: "门牌号",
    dataIndex: "createDate"
  },
  {
    title: "类型",
    dataIndex: "updateDate"
  },
  {
    title: "标签",
    dataIndex: "userId"
  },
  {
    title: "状态",
    dataIndex: "operation",
    scopedSlots: { customRender: "state" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
import request from "../../utils/request";
import EssayHeader from "../../components/EssayHeader.vue";
import ImageUpload from "@/components/ImageUpload";
export default {
  components: { ImageUpload, EssayHeader, Editor },
  data() {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: [

      ],
      titleleft: "信息管理",
      btnmsg: "新增信息",
      btnshow: true,
      tableData: {
        value: [

        ]
      },

      editorText: "",
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350
      },
      columns,
      visible: false,
      titleDraw: "查看信息",
      labelCol: { span: 3 },
      wrapperCol: { span: 20 },
      form: {
        newsId: "",
        title: undefined,
        content: undefined,
        userId: false,
        image: '',
        type: "",
        createDate: "",
        updateDate: "",
        releaseDate: ""
      }
    };
  },
  mounted() {
    // 调用接口
    // this.getArtcleData();
    // this.interval = setInterval(() => {
    //   this.getArtcleData();
    // }, 3000);
  },
  methods: {
    //获得信息的数据
    getArtcleData() {
      // const url='https://randomuser.me'
      request({
        // url:"/api/dashboard/chart",
        // url:'/api/news/getAllNews',
        url: "/api/news/getAllNews",
        method: "get",
        params: {}
      }).then(response => {
        this.tableData = {
          data: response.data
        };
        this.tableData.value = this.tableData.data.list;
      });
    },
    //获得信息详情
    getArtcleByid(newId) {
      request({
        // url:"/api/dashboard/chart",
        url: "/api/news/getNewsByNewsId",
        method: "get",
        params: { newId: newId }
      }).then(response => {
        this.form = response.data;
      });
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    search(params) {
      console.info("search", params);
    },
    add(params) {
      console.info("add", params);
      this.visible = true;
    },
    afterVisibleChange(val) {
      console.log("visible", val);
    },
    // 编辑 查看信息
    editDrawer(articleid) {
      this.titleDraw = "编辑信息";
      this.visible = true;
      this.getArtcleByid(articleid);
    },
    lookDrawer(articleid) {
      this.titleDraw = "查看信息";
      this.visible = true;
    },
    // 新增信息
    addDrawer() {
      this.titleDraw = "新增信息";
      this.visible = true;
    },
    // 删除信息
    deleteDrawer(articleid) {},
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.ant-table-tbody {
  background: #fff;
}
/deep/.ant-table.ant-table-bordered .ant-table-title {
  padding: 0;
}
.info {
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}
.header {
  width: 100%;
  background: #fff;
  display: flex;
  padding: 16px 16px;

  .title {
    flex: 1;
    font-size: 16px;
    color: black;
    font-weight: 500;
  }
  .seacher_add {
    display: flex;
    justify-content: space-around;
    flex: 1;
    .seacher {
      display: flex;
    }
  }
}
th.column-money,
td.column-money {
  text-align: right !important;
}
</style>
